﻿@{
    ViewBag.Title = "天气预报";
}
@*
@section scripts{
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        $(function () {
            draw();
            $(window).resize(function () {
                if (c.style.width != $(".tab-pane").width() + "px")
                    draw();
            });
        });
        var canvasWidth;
        var diffTemp = 10; var minTemp = 20; var dayTemp = [30, 27, 24]; var nightTemp = [22, 21, 20];

        function draw() {
            canvasWidth = $(".tab-pane").width();
            c.width = canvasWidth;
            ctx.clearRect(0, 0, c.width, c.height);

            ctx.translate(0.5, 0.5);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(0, 199);
            ctx.lineTo(canvasWidth - 1, 199);
            ctx.lineTo(canvasWidth - 1, 0);
            ctx.lineTo(0, 0);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#ccc";
            ctx.stroke();
            for (var i = 1; i < 10; i++) {
                ctx.moveTo(0, 20 * i);
                ctx.lineTo(canvasWidth - 1, 20 * i);
                ctx.lineWidth = 1;
                ctx.strokeStyle = "#ccc";
                ctx.stroke();
            }
            var gridW = canvasWidth / 3;
            $(".chartCol").width(gridW);
            for (var i = 1; i < 3; i++) {
                ctx.moveTo(i * gridW, 0);
                ctx.lineTo(i * gridW, 199);
                ctx.lineWidth = 1;
                ctx.strokeStyle = "#ccc";
                ctx.stroke();
            }
            var h = 160;
            var gridH = parseFloat(h / diffTemp);

            for (var i = 0; i < 3; i++) {
                var x = i * gridW + gridW / 2;
                var y = h - gridH * (dayTemp[i] - minTemp) + 20;
                ctx.beginPath();
                ctx.fillStyle = "#FF0000";
                ctx.lineWidth = 0;
                ctx.arc(x, y, 5, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();
                drawFont(dayTemp[i], x, y)
                if (i > 0) {
                    ctx.beginPath();
                    ctx.moveTo((i - 1) * gridW + gridW / 2, h - gridH * (dayTemp[i - 1] - minTemp) + 20);
                    ctx.lineTo(x, y);
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = "#ff0000";
                    ctx.stroke();
                }
                y = h - gridH * (nightTemp[i] - minTemp) + 20;
                ctx.beginPath();
                ctx.fillStyle = "blue";
                ctx.lineWidth = 0;
                ctx.arc(x, y, 5, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();

                if (i > 0) {
                    ctx.beginPath();
                    ctx.moveTo((i - 1) * gridW + gridW / 2, h - gridH * (nightTemp[i - 1] - minTemp) + 20);
                    ctx.lineTo(x, y);
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = "blue";
                    ctx.stroke();
                }
                drawFont(nightTemp[i], x, y)
            }
        }
        function drawFont(v, x, y) {
            ctx.fillStyle = "#000";
            ctx.lineWidth = 0;
            ctx.font = "14px sans-serif";
            ctx.fillText(v + "℃", x, y - 10);
        }
    </script>  
}
*@
<section id="artContent">
    <div >
        <div style="position:relative;">
            <img src="/Content/Images/weather/index_@{@Html.Raw(@ViewBag.FcstType)}.png" style="width:100%;" />
            <div style=" position:absolute; bottom:6px; background:rgba(0,0,0,0.5); width:100%; color:#fff; padding:3px 0; text-indent:10px;">
                @Html.Raw(@ViewBag.FcstTitle)
            </div>
        </div>
         @Html.Raw(@ViewBag.FcstText)
    </div>
</section>
@*<div class="tabbable" style="margin-top: 10px;">
    <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:;" data-toggle="tab">@Html.Raw(@ViewBag.FcstTitle)</a>
        </li>
    </ul>
    <div class="tab-content padding-2">
        <div class="tab-pane active" style="background: url(/Content/Images/weather/index_blue_bg.jpg) top center no-repeat;
            height: 200px;">
            <div class="chartRow">
                <section class="chartCol" style="text-align: left;">
                   @Html.Raw(@ViewBag.FcstText)
                </section>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
</div>*@ 